<template>
  <div class="forgetstep1">
    <div class="stepHead">
      <el-row :gutter="2">
        <el-col :span="4">
          <div class="RetrieveText">找回登录密码</div>
        </el-col>
        <el-col :span="7">
          <div class="mycolor color1"></div>
          <div class="a7">第一步：填写账号</div>
        </el-col>
        <el-col :span="7">
          <div class="mycolor color2"></div>
          <div class="f2">第二步：验证并设置新密码</div>
        </el-col>
        <el-col :span="6">
          <div class="mycolor color3"></div>
          <div class="a7">第三步：设置成功</div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <div class="Tips">
        <i class="el-icon-success"></i>
        验证码已发送至您的绑定的 {{info}}，请注意查收！
      </div>
      <el-form ref="ruleForm" :model="sizeForm" label-width="100px">
        <el-form-item label="验证码：" class="tb">
          <el-row>
            <el-col :span="10">
              <el-input v-model="sizeForm.verificationCode" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="14">
              <el-button class="Resend" type="warning" @click="Resend" :disabled="disabled1">
                <span v-if="hiding">重新发送</span>
                <span v-else>{{conut}}秒后可重新发送</span>
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="设置新密码：">
          <el-input v-model="sizeForm.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码：">
          <el-input v-model="sizeForm.confirmPassword" placeholder="请再次输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <div class="Tips2" v-if="Agreement">
        <i class="el-icon-error"></i>
        请确保您输入的密码与确认密码一致...
      </div>
      <el-button type="warning" @click="nextStep" :disabled="disabled" class="NextStep">下一步</el-button>
      <!-- <div class="mybtn" :disabled="true">下一步</div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'forgetStep2',
  data() {
    return {
      sizeForm: {
        verificationCode: '',
        newPassword: '',
        confirmPassword: ''
      },
      disabled1: false,  // 重新发送
      conut: 4,         // 秒数
      hiding: true,       // 重新发送的文字的变化  
    }
  },
  computed: {

    info() {
      return this.$route.params.data
    },

    // 新密码与重复密码是否一致
    Agreement() {
      if (this.sizeForm.newPassword == this.sizeForm.confirmPassword) {
        return false
      } else {
        return true
      }
    },

    // 下一步是否能够点击
    disabled() {
      if (this.sizeForm.verificationCode && this.sizeForm.newPassword && this.sizeForm.confirmPassword) {
        if (this.sizeForm.newPassword == this.sizeForm.confirmPassword) {
          return false
        } else {
          return true
        }

      } else {
        return true
      }
    }

  },
  methods: {

    // 发送验证码 
    async Resend() {
      this.hiding = false
      this.countDown()
    },
    // 60秒倒计时
    countDown() {
      this.disabled1 = true
      var timer = setInterval(() => {

        if (this.conut <= 0) {
          this.disabled1 = false
          this.hiding = true
          clearInterval(timer)
        } else {
          this.conut--
        }
      }, 1000)
    },

    async nextStep() {
      let [
        status,
        mail,
        phone,
        data,
        password,
        code
      ] = [
          '',
          '',
          '',
          {},
          this.sizeForm.newPassword,
          this.sizeForm.verificationCode
        ]
      if (this.info.indexOf('@') == -1) {
        data = {
          status: 'phone',
          phone: this.info,
          password,
          code

        }
      } else {
        data = {
          status: 'mail',
          phone: this.info,
          password,
          code
        }
      }
      console.log(data)
      let res = await this.$http({
        method: 'post',
        url: 'index/api/retrievePwd',
        data
      })
      if (res.data.State.Code == 200) {
        this.$router.push({
          name: 'forgetStep3'
        })
      } else if(res.data.State.Code == 2005){
        this.$notify.error({
          title: '此密码已经使用过 请更换新密码...'
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.forgetstep1 {
  padding-bottom: 40px;
  border-bottom: 1px #e6e6e6 dashed;
  .stepHead {
    height: 134px;
    border-bottom: 1px solid #e6e6e6;
    .el-row {
      width: 786px;
      padding-left: 94px;
      padding-top: 50px;
      .RetrieveText {
        font-size: 16px;
        font-weight: bold;
        color: #2f2f2f;
      }
      .mycolor {
        height: 8px;
        margin-top: 6.5px;
      }
      .color1 {
        background-color: #ffd05e;
      }
      .color2 {
        background-color: #ff9c00;
      }
      .color3 {
        background-color: #eeeeee;
      }
      .f2,
      .a7 {
        font-size: 14px;
        margin-top: 15px;
      }
      .f2 {
        color: #2f2f2f;
      }
      .a7 {
        color: #a7a7a7;
      }
    }
  }
  .content {
    margin-left: 94px;
    .Tips {
      background-color: #dbebdb;
      height: 38px;
      line-height: 38px;
      color: #326032;
      font-size: 12px;
      border-radius: 4px;
      margin-top: 16px;
      margin-bottom: 50px;
      i {
        margin: 0 6px 0 15px;
      }
    }
    .Tips2 {
      background-color: #eea9292a;
      height: 38px;
      line-height: 38px;
      color: #ee9929;
      font-size: 12px;
      border-radius: 4px;
      margin-top: 16px;
      margin-bottom: 50px;
      i {
        margin: 0 6px 0 15px;
      }
    }
    p {
      font-size: 14px;
      font-weight: bold;
      line-height: 130px;
      margin-top: 18px;
    }
    .el-form {
      width: 400px;
      .Resend {
        text-align: center;
        margin-left: 10px;
      }
    }
    .NextStep {
      margin-left: 200px;
    }
  }
}
</style>